<!doctype html>
<html>

<head>
		<meta charset="utf-8">
		<title>个人中心-我的消息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
	
		<style>
			* {
			    touch-action: pan-y;
			}
			.mui-control-content {
				min-height: 35rem;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{
				background-color:#ff9400;
			}
			.mui-table-view .mui-media-object{
				height: 75px;
				max-width: 130px;
			}
			.mui-bar-nav{
					background-color: #e94709;
			}
			.top-return {
			position: absolute;
			    width: 10%;
				top: 0.1875rem;			
					}
					.top-return img{
					     width: 75%;					
							}
			.mui-bar-nav .mui-title{
					color: #FFFFFF;
			}
			
			.top-logo {
			position: absolute;
			    width: 10%;
				left: 28%;
				top: 0.1875rem;			
					}
					.top-logo img{
					    width: 90%;					
							}
			.top-menu {
			position: absolute;
				width: 10%;
				right: 5%;
				top: 0.1875rem;			
					}
					.top-menu img{
						 width: 75%;								
							}
							.mui-bar-tab .mui-tab-item.mui-active{
								color: #ea4609;
								}
					/* 公共部分end */
		
			.mui-table-view .mui-media-object{
				max-width: 35%;
				border-radius: 10%;
			}
			.mui-slider-indicator.mui-segmented-control .mui-control-item {
				border-left:1px solid #c1c1c1 ;
				border-bottom:1px solid #c1c1c1 ;
				padding: 1px;
				color: #585858;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom:3px solid #e94709 ;
				color: #585858;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{
				background: #EEEEEE;
			}
			
			.mui-media-body p{
				font-size: 10px;
				
			}
			.bottom-remind{
				    width: 100%;
				    text-align: center;
				    padding-top: 10%;
					padding-bottom: 20%;
				    font-size: 15px;
				    color: #969696;
			}
			.addtime{
				font-size: 10px;
			}
		</style>
		<!-- 公共头部start -->
		<header class="mui-bar mui-bar-nav">
			<a class="top-return mui-action-back"><img src="images/return.png" ></a>
			<a class="top-logo"><img src="images/logo.png" ></a>
			<h1 class="mui-title">	
					Aitimt 爱计时</h1>
			<a href="#popover" id="openPopover" class="top-menu" ><img src="images/menu.png" ></a>
			<div id="popover" class="mui-popover">
			  <ul class="mui-table-view">
			    <li class="mui-table-view-cell"><a href="#">Item1</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item2</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item3</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item4</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item5</a></li>
			  </ul>
			</div>
		</header>
		<!-- 公共头部end -->
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">通知</a>
					<a class="mui-control-item" href="#item2mobile">评论我的</a>
					<a class="mui-control-item" href="#item3mobile">赞我的</a>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell mui-media">
										<a href="detail.html">
											<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
											<div class="mui-media-body">
												[爱计时]@您
												<p style="white-space: normal;word-break: break-all;">您报名的赛事将在XX月XX日XX时正式开赛,注意...请提前备好适当的衣物和装备</p>
											<p class="addtime">2020/01/01 10:00:00</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media">
										<a href="detail.html">
											<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
											<div class="mui-media-body">
												[爱计时]@您
												<p style="white-space: normal;word-break: break-all;">您报名的赛事将在XX月XX日XX时正式开赛,注意...请提前备好适当的衣物和装备</p>
											<p class="addtime">2020/01/01 10:00:00</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media">
										<a href="detail.html">
											<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
											<div class="mui-media-body">
												[爱计时]@您
												<p style="white-space: normal;word-break: break-all;">您报名的赛事将在XX月XX日XX时正式开赛,注意...请提前备好适当的衣物和装备</p>
											<p class="addtime">2020/01/01 10:00:00</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media">
										<a href="detail.html">
											<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
											<div class="mui-media-body">
												[爱计时]@您
												<p style="white-space: normal;word-break: break-all;">您报名的赛事将在XX月XX日XX时正式开赛,注意...请提前备好适当的衣物和装备</p>
											<p class="addtime">2020/01/01 10:00:00</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media">
										<a href="detail.html">
											<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
											<div class="mui-media-body">
												[爱计时]@您
												<p style="white-space: normal;word-break: break-all;">您报名的赛事将在XX月XX日XX时正式开赛,注意...请提前备好适当的衣物和装备</p>
											<p class="addtime">2020/01/01 10:00:00</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media">
										<a href="detail.html">
											<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
											<div class="mui-media-body">
												[爱计时]@您
												<p style="white-space: normal;word-break: break-all;">您报名的赛事将在XX月XX日XX时正式开赛,注意...请提前备好适当的衣物和装备</p>
											<p class="addtime">2020/01/01 10:00:00</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media">
										<a href="detail.html">
											<img class="mui-media-object mui-pull-left" src="images/banner.jpg">
											<div class="mui-media-body">
												[爱计时]@您
												<p style="white-space: normal;word-break: break-all;">您报名的赛事将在XX月XX日XX时正式开赛,注意...请提前备好适当的衣物和装备</p>
											<p class="addtime">2020/01/01 10:00:00</p>
											</div>
										</a>
									</li>
																		
								</ul>
								<div class="bottom-remind">已显示全部内容</div>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell mui-media">
											<a href="javascript:;">
												<img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">
												<div class="mui-media-body">
													幸福sdasdhasldhasd
													<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
												<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
												<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
												</div>
											</a>
										</li>
										<li class="mui-table-view-cell mui-media">
											<a href="javascript:;">
												<img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">
												<div class="mui-media-body">
													幸福sdasdhasldhasd
													<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
													<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
													<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
												</div>
											</a>
										</li>																												
									</ul>
									<div class="bottom-remind">已显示全部内容</div>
								</div>
							</div>
	
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell mui-media">
											<a href="javascript:;">
												<img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">
												<div class="mui-media-body">
													幸福sdasdhasldhasd
													<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
													<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
													<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
												</div>
											</a>
										</li>
										<li class="mui-table-view-cell mui-media">
											<a href="javascript:;">
												<img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">
												<div class="mui-media-body">
													幸福sdasdhasldhasd
													<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
												<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
												<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
												</div>
											</a>
										</li>
										<li class="mui-table-view-cell mui-media">
											<a href="javascript:;">
												<img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">
												<div class="mui-media-body">
													幸福sdasdhasldhasd
													<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
												<p class=" mui-icon iconfont icon-riqi addtime">2020-01-01</p>
												<p class=" mui-icon iconfont icon-didian addtime">泰国清迈</p>
												</div>
											</a>
										</li>
																			
									</ul>
									<div class="bottom-remind">已显示全部内容</div>
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 公共底部start -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item " href="index.html">
				<span class="mui-icon iconfont icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="event.html">
				<span class="mui-icon iconfont icon-qizhi"></span>
				<span class="mui-tab-label">赛事</span>
			</a>
			<a class="mui-tab-item" href="grade.html">
				<span class="mui-icon iconfont icon-svg"></span>
				<span class="mui-tab-label">成绩</span>
			</a>
			<a class="mui-tab-item mui-active" href="my.html">
				<span class="mui-icon iconfont icon-copy"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<!-- 公共底部end -->
		<script src="js/mui.min.js"></script>
<script type="text/javascript">
			mui('.mui-bar').on('tap','a',function(){
				document.location.href=this.href;
			})
			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				document.getElementById('slider').addEventListener('slide', function(e) {
				});
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);
		</script>
	
	</body>
	
</html>
